@extends("admin.layout.main")

@section("content")
    <style>

    </style>
    <div id="app" style="width: 100%">

        {{--主体代码--}}
        <Row type="flex" justify="center" align="middle">

            <i-col span="24" >
                手机号：<i-input v-model="search.phone" style="width:200px" placeholder="请输入手机号"></i-input>
                <span>
                     <i-button type="success"  @click="searchList">搜索</i-button>
                </span>
            </i-col>

        </Row>
        <Row  justify="center" align="middle" >
            <i-col  style="margin-top: 20px;width: 100%">
                <i-table size="large"  ref="selection" :data="tableData" :columns="tableColumns" >
                </i-table>
            </i-col>
        </Row>

        <Row type="flex" justify="center" class="code-row-bg">
            <i-col>
                <Page
                        size="small"
                        :total="page.total"
                        :current="page.current"
                        :page-size="page.pageSize"
                        show-total
                        show-elevator
                        @on-change="getList">

                </Page>
            </i-col>
        </Row>



    </div>
    <script src="/js/layer/layer.js"></script>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data(){
                return {
                    token:'',
                    tableColumns: [
                        {
                            title: 'ID',
                            key: 'id',

                        },
                        {
                            title: '手机号',
                            key: 'phonum',

                        },
                        {
                            title: '短信号码',
                            key: 'phone',

                        },
                        {
                            title: '短信内容',
                            key: 'msg',
                            width:400

                        },
                        {
                            title: '短信日期',
                            key: 'time',

                        }

                    ],
                    page: {
                        total: 0,
                        current: 1,
                        pageSize: 20,
                    },
                    tableData: [],
                    search:{
                        phone:'',
                    },
                    permission_ids:[],
                    origin_permissions:[],
            }
            },
            mounted() {
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods:{
                searchList(){
                    this.getList(1);
                },
                getList(page){
                    axios.get('/admin/sms/list', {
                        params: {
                            token:vm.token,
                            page: page,
                            pageSize:this.page.pageSize,
                            phone:this.search.phone,
                        }
                    }).then((response) => {
                        console.log(response.data.data);
                        vm.tableData = response.data.data;
                        vm.page.total = response.data.total;
                    })
                },
                batch() {
                    let ids = [];
                    this.$refs.selection.getSelection().map(item => {
                        ids.push(item.id);
                    });
                        return ids;
                },
                permissionList(){
                    axios.get('/admin/permission/list', {
                        params: {
                            token:vm.token,
                        }
                    }).then((response) => {
                        data = response.data;
                        if(data.code == 200){
                            vm.origin_permissions = [...data.result.list];
                        }
                    })
                },

            },
            watch:{
                permission_ids(){
                    if(this.origin_permissions.length == this.permission_ids.length && this.origin_permissions.length > 0){
                        this.checkAll = true;
                    }else{
                        this.checkAll = false;
                    }
                }
            }


        });

        vm.token = getToken();
        vm.permissionList();
        vm.getList(1);
    </script>

@endsection

